'use client'

import { useState } from 'react'
import { Card, Row, Col, Modal, Typography, List } from 'antd'
import {
    BookOutlined,
    SafetyOutlined,
    CodeOutlined,
    InfoCircleOutlined,
    UserOutlined,
    PlayCircleOutlined,
    SafetyCertificateOutlined,
    SettingOutlined,
    LockOutlined,
    DesktopOutlined,
    DatabaseOutlined
} from '@ant-design/icons'

const { Title, Paragraph, Text } = Typography

export default function HelpPage() {
    const [modalVisible, setModalVisible] = useState(false)
    const [currentContent, setCurrentContent] = useState(null)

    // 帮助内容配置
    const helpSections = [
        {
            id: 'quickstart',
            title: '快速入门',
            icon: <BookOutlined />,
            color: '#1890ff',
            items: [
                {
                    key: 'platform-intro',
                    title: '平台介绍',
                    icon: <InfoCircleOutlined />,
                    content: {
                        title: '平台介绍',
                        sections: [
                            {
                                title: '什么是平台？',
                                content: '医学影像处理工具集成展示平台，为医学影像处理领域的研究者和开发者提供一个集中展示和分享工具的平台。'
                            },
                            {
                                title: '主要功能',
                                content: [
                                    '展示医学影像处理网站和应用',
                                    '提供工具搜索和分类浏览',
                                    '支持用户上传和管理自己的产品',
                                    '统计产品浏览量和使用情况'
                                ]
                            },
                            {
                                title: '技术特点',
                                content: [
                                    '响应式设计，支持多设备访问',
                                    '安全的用户认证和权限管理',
                                    '高效的文件上传和存储系统',
                                    '现代化的用户界面和交互体验'
                                ]
                            }
                        ]
                    }
                },
                {
                    key: 'register-login',
                    title: '注册登录',
                    icon: <UserOutlined />,
                    content: {
                        title: '注册登录',
                        sections: [
                            {
                                title: '注册流程',
                                content: [
                                    '点击页面右上角"注册"按钮',
                                    '填写用户名、邮箱、密码等基本信息',
                                    '填写个人资料（姓名、机构、部门等）',
                                    '提交注册申请',
                                    '等待邮箱验证（如需要）'
                                ]
                            },
                            {
                                title: '登录方式',
                                content: [
                                    '使用用户名和密码登录',
                                    '支持"记住我"功能',
                                    '忘记密码可通过邮箱重置'
                                ]
                            },
                            {
                                title: '常见问题',
                                content: [
                                    '注册时提示用户名已存在：请更换其他用户名',
                                    '收不到验证邮件：检查垃圾邮件文件夹',
                                    '登录失败：确认用户名和密码正确'
                                ]
                            }
                        ]
                    }
                },
                {
                    key: 'basic-operations',
                    title: '基本操作',
                    icon: <PlayCircleOutlined />,
                    content: {
                        title: '基本操作',
                        sections: [
                            {
                                title: '浏览产品',
                                content: [
                                    '访问首页查看所有产品展示',
                                    '点击产品卡片查看详细信息',
                                    '使用"访问网站"或"下载"按钮体验产品'
                                ]
                            },
                            {
                                title: '搜索筛选',
                                content: [
                                    '使用搜索框输入关键词查找产品',
                                    '通过产品类型筛选（网站/应用）',
                                    '按照"最新"或"最热"排序浏览'
                                ]
                            },
                            {
                                title: '上传产品',
                                content: [
                                    '登录后点击"上传产品"按钮',
                                    '填写产品基本信息（标题、描述、类型）',
                                    '上传产品缩略图',
                                    '提供访问链接或上传应用文件',
                                    '提交审核并等待发布'
                                ]
                            }
                        ]
                    }
                }
            ]
        },
        {
            id: 'security',
            title: '安全隐私',
            icon: <SafetyOutlined />,
            color: '#52c41a',
            items: [
                {
                    key: 'privacy-protection',
                    title: '隐私保护',
                    icon: <SafetyCertificateOutlined />,
                    content: {
                        title: '隐私保护',
                        sections: [
                            {
                                title: '数据收集政策',
                                content: '平台仅收集必要的用户信息，包括注册信息、上传的产品信息和使用统计数据。'
                            },
                            {
                                title: '信息使用范围',
                                content: [
                                    '用户信息仅用于平台功能提供',
                                    '产品信息用于展示和搜索',
                                    '统计数据用于平台优化',
                                    '不会向第三方泄露个人信息'
                                ]
                            },
                            {
                                title: '用户权利',
                                content: [
                                    '可以查看自己的所有数据',
                                    '可以修改个人信息',
                                    '可以删除自己上传的产品',
                                    '可以申请注销账户'
                                ]
                            }
                        ]
                    }
                },
                {
                    key: 'permission-management',
                    title: '权限管理',
                    icon: <SettingOutlined />,
                    content: {
                        title: '权限管理',
                        sections: [
                            {
                                title: '用户权限等级',
                                content: [
                                    '普通用户：可以浏览、搜索、上传产品',
                                    '管理员：拥有所有权限，可以管理所有内容'
                                ]
                            },
                            {
                                title: '产品访问控制',
                                content: [
                                    '所有产品信息对所有用户可见',
                                    '用户只能编辑和删除自己上传的产品',
                                    '产品浏览量对所有用户可见'
                                ]
                            },
                            {
                                title: '数据共享设置',
                                content: [
                                    '产品信息默认公开展示',
                                    '用户个人信息不会公开',
                                    '统计数据仅显示汇总信息'
                                ]
                            }
                        ]
                    }
                },
                {
                    key: 'account-security',
                    title: '账户安全',
                    icon: <LockOutlined />,
                    content: {
                        title: '账户安全',
                        sections: [
                            {
                                title: '密码安全建议',
                                content: [
                                    '使用至少8位字符的强密码',
                                    '包含大小写字母、数字和特殊字符',
                                    '不要使用常见密码或个人信息',
                                    '定期更换密码'
                                ]
                            },
                            {
                                title: '账户保护措施',
                                content: [
                                    '密码使用安全哈希算法存储',
                                    '登录失败次数限制',
                                    '异常登录行为监控',
                                    '安全的会话管理'
                                ]
                            },
                            {
                                title: '异常处理流程',
                                content: [
                                    '发现异常登录时立即修改密码',
                                    '联系管理员报告安全问题',
                                    '定期检查账户活动记录',
                                    '及时更新联系方式'
                                ]
                            }
                        ]
                    }
                }
            ]
        },
        {
            id: 'developer',
            title: '开发者说明',
            icon: <CodeOutlined />,
            color: '#722ed1',
            items: [
                {
                    key: 'frontend-interface',
                    title: '前端界面',
                    icon: <DesktopOutlined />,
                    content: {
                        title: '前端界面',
                        sections: [
                            {
                                title: '技术栈介绍',
                                content: [
                                    'Next.js 15 - React 全栈框架',
                                    'React 18 - 用户界面库',
                                    'Ant Design - UI 组件库',
                                    'Tailwind CSS - 样式框架'
                                ]
                            },
                            {
                                title: '组件架构说明',
                                content: [
                                    '页面组件：负责路由和页面逻辑',
                                    '业务组件：封装特定功能模块',
                                    '通用组件：可复用的UI组件',
                                    '工具函数：辅助功能和数据处理'
                                ]
                            },
                            {
                                title: '路由设计原理',
                                content: [
                                    '使用 Next.js App Router',
                                    '文件系统路由自动生成',
                                    '支持动态路由和嵌套路由',
                                    '客户端和服务端渲染结合'
                                ]
                            }
                        ]
                    }
                },
                {
                    key: 'database-service',
                    title: '数据库服务',
                    icon: <DatabaseOutlined />,
                    content: {
                        title: '数据库服务',
                        sections: [
                            {
                                title: '数据库结构',
                                content: [
                                    'PostgreSQL 15 - 主数据库',
                                    'users 表 - 用户信息',
                                    'products 表 - 产品信息',
                                    '支持 UUID 主键和时间戳'
                                ]
                            },
                            {
                                title: 'API接口说明',
                                content: [
                                    'RESTful API 设计规范',
                                    'GET /api/products - 获取产品列表',
                                    'POST /api/products - 创建新产品',
                                    'GET /api/products/[id] - 获取产品详情'
                                ]
                            },
                            {
                                title: '数据模型介绍',
                                content: [
                                    '用户模型：包含认证和个人信息',
                                    '产品模型：支持网站和应用两种类型',
                                    '文件存储：本地文件系统存储',
                                    '数据验证：前后端双重验证'
                                ]
                            }
                        ]
                    }
                }
            ]
        }
    ]

    // 处理子项点击
    const handleItemClick = (content) => {
        setCurrentContent(content)
        setModalVisible(true)
    }

    // 渲染内容
    const renderContent = (content) => {
        if (!content) return null

        return (
            <div>
                {content.sections.map((section, index) => (
                    <div key={index} className="mb-6">
                        <Title level={4} className="mb-3">
                            {section.title}
                        </Title>
                        {Array.isArray(section.content) ? (
                            <List
                                size="small"
                                dataSource={section.content}
                                renderItem={(item) => (
                                    <List.Item>
                                        <Text>• {item}</Text>
                                    </List.Item>
                                )}
                            />
                        ) : (
                            <Paragraph className="text-gray-600">
                                {section.content}
                            </Paragraph>
                        )}
                    </div>
                ))}
            </div>
        )
    }

    return (
        <div className="p-8">
            <div className="max-w-6xl mx-auto">
                {/* 页面标题 */}
                <div className="text-center mb-12">
                    <Title level={1} className="mb-4">
                        帮助文档中心
                    </Title>
                    <Paragraph className="text-lg text-gray-600">
                        Medical Platform Help
                    </Paragraph>
                </div>

                {/* 帮助内容区域 */}
                <Row gutter={[32, 32]} justify="center">
                    {helpSections.map((section) => (
                        <Col xs={24} md={8} key={section.id}>
                            <Card
                                className="h-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
                                styles={{ body: { padding: '32px 24px' } }}
                            >
                                {/* 卡片标题 */}
                                <div className="text-center mb-6">
                                    <div
                                        className="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4 transition-transform duration-300 hover:scale-110"
                                        style={{ backgroundColor: `${section.color}15`, color: section.color }}
                                    >
                                        <span className="text-2xl">
                                            {section.icon}
                                        </span>
                                    </div>
                                    <Title level={3} className="mb-0">
                                        {section.title}
                                    </Title>
                                </div>

                                {/* 子项列表 */}
                                <div className="space-y-3">
                                    {section.items.map((item) => (
                                        <div
                                            key={item.key}
                                            className="flex items-center p-3 rounded-lg cursor-pointer transition-all duration-200 hover:bg-gray-50 hover:translate-x-1"
                                            onClick={() => handleItemClick(item.content)}
                                        >
                                            <span className="text-lg mr-3" style={{ color: section.color }}>
                                                {item.icon}
                                            </span>
                                            <span className="text-gray-700 hover:text-gray-900">
                                                {item.title}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                            </Card>
                        </Col>
                    ))}
                </Row>

                {/* 常见问题区域 */}
                <div className="mt-16">
                    <Card className="shadow-sm">
                        <Title level={2} className="text-center mb-6">
                            常见问题 FAQ
                        </Title>
                        <Row gutter={[24, 16]}>
                            <Col xs={24} md={8}>
                                <div className="text-center p-4">
                                    <Text strong>如何上传产品？</Text>
                                    <Paragraph className="mt-2 text-gray-600">
                                        登录后点击"上传产品"按钮，填写相关信息即可
                                    </Paragraph>
                                </div>
                            </Col>
                            <Col xs={24} md={8}>
                                <div className="text-center p-4">
                                    <Text strong>忘记密码怎么办？</Text>
                                    <Paragraph className="mt-2 text-gray-600">
                                        在登录页面点击"忘记密码"，通过邮箱重置
                                    </Paragraph>
                                </div>
                            </Col>
                            <Col xs={24} md={8}>
                                <div className="text-center p-4">
                                    <Text strong>如何修改个人信息？</Text>
                                    <Paragraph className="mt-2 text-gray-600">
                                        登录后在个人中心页面可以修改个人信息
                                    </Paragraph>
                                </div>
                            </Col>
                        </Row>
                    </Card>
                </div>
            </div>

            {/* 详情弹窗 */}
            <Modal
                title={currentContent?.title}
                open={modalVisible}
                onCancel={() => setModalVisible(false)}
                footer={null}
                width={800}
                styles={{
                    body: {
                        maxHeight: '70vh',
                        overflowY: 'auto',
                        padding: '24px'
                    }
                }}
            >
                {renderContent(currentContent)}
            </Modal>
        </div>
    )
}